<template>
  <div>
      <el-row style="background-color: white">
      <el-col :span="5">
        <a style="color: #606266" href="#">首页</a>
        <a style="color: #dcdfe6" href="#">/ 资产管理 </a>
        <a style="color: #dcdfe6" href="#">/ 楼栋信息</a></el-col
      >
    </el-row>
    <hr />
    <el-row style="background-color: white">
      <el-col :span="2">查询条件</el-col>
    </el-row>
    <el-row style="background-color: white">
      <el-col :span="6"
        ><el-input
          v-model="xuanzeinfo.name"
          placeholder="请输入业主姓名"
          style="margin-left: 20px"
          clearable
        >
        </el-input>
      </el-col>

      <el-col :span="6"
        ><el-input
          v-model="xuanzeinfo.tel"
          placeholder="请输入业主电话"
          style="margin-left:38px"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="6"
        >
        <el-input
         v-model="xuanzeinfo.house_id"
         placeholder="请输入房屋id"
          style="margin-left:80px"
          clearable
        >
        </el-input>
      </el-col>
      <el-col :span="6"><el-button @click="find()" style="margin-right:20px" type="primary" icon="el-icon-search">搜索</el-button></el-col>
    </el-row>
<hr />
    <el-row>
      <el-col :span="1">
        <el-button type="primary" @click="dialogFormVisibleinsert=true" style="margin-left: 1100px">添加楼栋<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-col>
    </el-row>
     <template>
      <el-table :data="pagination.records" style="width: 100%">
        <el-table-column sortable prop="userId" label="业主ID" width="100">
        </el-table-column>
          <el-table-column prop="username" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
        </el-table-column>
        <el-table-column prop="identitycard" label="身份证" width="180">
        </el-table-column>
        <el-table-column prop="tel" label="联系方式" width="180">
        </el-table-column>
        <el-table-column prop="tadmin.username" label="创建员工" width="100">
        </el-table-column>
        <el-table-column label="操作" width="500" align=center> 
            <template slot-scope="scope">
              <el-button size="medium" @click="demo(scope.row)" round>房屋入住</el-button>
              <el-button size="medium" @click="demo2(scope.row)" round>房屋解绑</el-button>
          <el-button
            size="medium"
            @click="upd(scope.row)"
            round 
            >修改</el-button
          >
          <el-button size="medium" @click="deleteParkinglot(scope.row)" round
            >删除</el-button
          >
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    </template>
    <!--添加业主-->
    <el-dialog :append-to-body="true" title="添加房屋" :visible.sync="dialogFormVisibleinsert">
        <el-form>
        <el-form-item label="业主姓名：" label-width="120px">
          <el-input v-model="addinfo.username" placeholder="必填，请填写业主姓名" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="性别：" label-width="120px">
          <el-radio v-model="addinfo.sex" label="男">男</el-radio>
          <el-radio v-model="addinfo.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="身份证号码：" label-width="120px">
          <el-input v-model="addinfo.identitycard" placeholder="必填，请填写身份证号码" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="电话：" label-width="120px">
          <el-input v-model="addinfo.tel" placeholder="必填，请填写电话" autocomplete="off">
          </el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="add()">保存</el-button>
        </div>
    </el-dialog>
    <!--修改信息-->
    <el-dialog :append-to-body="true" title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>
        <el-form-item label="业主编号：" label-width="120px">
          <el-input
          placeholder="业主编号不可修改"
          v-model="updinfo.userId"
           autocomplete="off"
          :disabled="true">
        </el-input>
        </el-form-item>
        <el-form-item label="业主性别：" label-width="120px">
          <el-radio v-model="updinfo.sex" label="男">男</el-radio>
          <el-radio v-model="updinfo.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="业主姓名：" label-width="120px">
          <el-input
          placeholder="必填，请填写业主姓名"
          v-model="updinfo.username"
           autocomplete="off"
           >
        </el-input>
        </el-form-item>
        <el-form-item label="身份证号码：" label-width="120px">
          <el-input
          placeholder="必填，请填写身份证号码"
          v-model="updinfo.identitycard"
           autocomplete="off"
           >
        </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="upd2()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
    return{
        dialogFormVisibleupdate:false,
        dialogFormVisibleinsert:false,
        pagination:{},
        xuanzeinfo:{
            page:1,
            pageSize:3
        },
        addinfo:{},
        updinfo:{}
    };
},
methods:{
  deleteParkinglot(row){
    let url="yezhu/del";
    let param={id:row.userId}
    this.$axios.post(url,param).then(resp=>{this.find()});
  },
  demo2(row){
    this.$store.dispatch("changeyezhuInfo",row);
    this.$router.push("/yezhu/fangwu2");
  },
  demo(row){
    this.$store.dispatch("change",row);
    this.$router.push("/yezhu/loudong");
  },
upd(row){
this.dialogFormVisibleupdate=true;
this.updinfo=row;
},

upd2(){
  let url="yezhu/upd";
this.$axios.post(url,this.updinfo).then(resp=>{if(resp.data.success){this.find(),this.dialogFormVisibleupdate=false}});
},

add(){
  let adminid=JSON.parse(window.sessionStorage.getItem('Authorization'));
  this.addinfo.adminId=adminid.id;
let url="yezhu/add";
console.log(this.addinfo);
this.$axios.post(url,this.addinfo).then(resp=>{if(resp.data.success){this.dialogFormVisibleinsert=false}});
this.find();
},

find(){
let url="yezhu/Info";
this.$axios.post(url,this.xuanzeinfo).then(resp=>{this.pagination=resp.data.result;console.log(this.pagination);})
},

handleSizeChange(pageSize) {
  this.xuanzeinfo.pageSize=pageSize;
      this.find();
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.xuanzeinfo.page=page;
      this.find();
    },
},
mounted(){
    this.find();
}
}
</script>

<style>

</style>